import React,{ Component } from 'react'
import {
    Button,
    Row,
    Col,
    Input,
    InputNumber,
    Collapse,
    message,
} from 'antd';
import { LegionsProForm,LegionsProModal } from 'legions-pro-design';
import { bind,observer } from 'legions/store-react'
import ProjectStore from '../../stores/projectStore';
import { InstanceProForm } from 'legions-pro-design/es/LegionsProForm/interface';
import { InstanceProModal } from 'legions-pro-design/es/LegionsProModal/interface';
import { InstanceProTable } from 'legions-pro-design/es/LegionsProTable/interface';
import { observable,action,computed } from 'mobx';
import { observableViewModel } from 'legions/store-utils'
import CodeEditor from '../../components/codeEditor';
import {
    PropertyTableOperationFormFields,
    PropertyTableOperationFormFieldsRule,
    PropertyKeyValueFormFields,
} from '../../models/form/propertyFormModel';
import { OperationEnum } from '../../constants/enum-data';
import { fullProvider,lazyInject,inject } from 'legions-control-container';
import TableListPropertyConfig from '../../components/property.config.table/tableListPropertyConfig';
interface IProps {
    store?: ProjectStore
    onReady: (that: TableOperationProerty) => void;
}
const { Panel } = Collapse;
class ViewModel {
    /**
     *
     * 模态框装载内容
     * @type {number}
     * @memberof ViewModel
     */
    @observable modalContentType: number = -1
    /**
     * 代码编辑器值
     *
     * @memberof ViewModel
     */
    @observable codeValue = ''
}
@bind({ store: ProjectStore })
@observer
export default class TableOperationProerty extends Component<IProps> {
    modalRef: InstanceProModal = null
    viewModel = observableViewModel<ViewModel>(new ViewModel());
    @lazyInject(TableListPropertyConfig)
    tableListPropertyConfig!: TableListPropertyConfig
    constructor(props: IProps) {
        super(props)
        this.state = {
        }
        this.tableListPropertyConfig.registerOperationInstance(this);
        this.props.onReady && this.props.onReady(this);
    }
    addOptions() {
        this.modalRef.viewModel.visible = true;
        this.modalRef.viewModel.title = '添加数据项';
    }
    deleteParams=()=> {
        const viewModel: PropertyTableOperationFormFields = this.props.store.formProperyOperattionRef.viewModel.InputDataModel as PropertyTableOperationFormFields;
        const id = viewModel.params.value.key;
        if (id) {
            const TablePropertyApp = this.props.store.context.listPagePropertyApp.context.TablePropertyApp;
            const Item = TablePropertyApp.viewModel.operationConfigCode.find(item => item.id === TablePropertyApp.viewModel.openOperationConfigId);
            if (Item) {
                const _index = Item.params.findIndex(item => item.key === id);
                if (_index > -1) {
                    TablePropertyApp.viewModel.dispatchAction(() => {
                        Item.params.splice(_index,1)
                        this.props.store.formProperyOperattionRef.methods.setFormStates<InstanceType<typeof LegionsProForm['LabelWithSelectModel']>>('params',(value) => {
                            value.iFormProps.options = Item.params;
                        })
                    })
                }
            }
        }
    }
    handleEditCode = (value: number) => {
        const viewModel: PropertyTableOperationFormFields = this.props.store.formProperyOperattionRef.viewModel.InputDataModel as PropertyTableOperationFormFields;
        if (value === OperationEnum.editOperationOnlickCode) {
            this.viewModel.codeValue = viewModel.onClick.value;
            this.modalRef.viewModel.title = '添加单击事件'
        } else {
            this.modalRef.viewModel.title = '添加请求参数'
        }
        this.modalRef.viewModel.visible = true;
        const width = 500;
        this.modalRef.viewModel.width = width;
        this.viewModel.modalContentType = value;
    }
    render() {
        const TablePropertyApp = this.props.store.context.listPagePropertyApp.context.TablePropertyApp;
        return (
            <div>
                <Collapse defaultActiveKey={['1']}>
                    <Panel header="组件属性" key="1">
                        <LegionsProForm
                            <PropertyTableOperationFormFields>
                            InputDataModel={PropertyTableOperationFormFields}
                            mapPropsToFields={(props) => {
                                return new PropertyTableOperationFormFields(props) // 实际处理结果实体
                            }}
                            onFieldsChange={(props,formFields) => {
                                this.props.store.formProperyOperattionRef.store.updateFormInputData(this.props.store.formProperyOperattionRef.uid,formFields)
                            }}
                            onReady={(form,ref) => {
                                this.props.store.formProperyOperattionRef = ref;
                                /* const field = ['paramsRenders','apiUrl','method']
                                field.map((item) => {
                                    this.props.store.formProperyOperattionRef.methods.setFormStates(item,(value) => {
                                        value.iFormProps.visible = false;
                                    })
                                }) */

                            }}
                            colCount={1}
                            controls={this.tableListPropertyConfig.createOperationConfig()}
                        ></LegionsProForm>
                    </Panel>
                </Collapse>
                <LegionsProModal
                    onOk={() => {
                        if (this.viewModel.modalContentType === OperationEnum.addOperationParams) {
                            this.props.store.formProperKeyValueRef.viewModel.form.validateFields((err,values: PropertyKeyValueFormFields) => {
                                const value = PropertyKeyValueFormFields.formFieldsToData(PropertyKeyValueFormFields,this.props.store.formProperKeyValueRef.viewModel.InputDataModel)
                                const TablePropertyApp = this.props.store.context.listPagePropertyApp.context.TablePropertyApp;
                                if (!err) {
                                    const _index = TablePropertyApp.viewModel.operationConfigCode.findIndex(item => item.id === TablePropertyApp.viewModel.openOperationConfigId)
                                    if (_index > -1) {
                                        TablePropertyApp.viewModel.dispatchAction(() => {
                                            const __index = TablePropertyApp.viewModel.operationConfigCode[_index].params.findIndex((item) => item.key === value['keysId']);
                                            if (__index > -1) {
                                                message.warning('存在相同数据，请勿重复添加');
                                                return;
                                            }
                                            TablePropertyApp.viewModel.operationConfigCode[_index].params.push({ key: value['keysId'],value: value['value'] });
                                            this.props.store.formProperyOperattionRef.methods.setFormStates<InstanceType<typeof LegionsProForm['LabelWithSelectModel']>>('params',(value) => {
                                                value.iFormProps.options = TablePropertyApp.viewModel.operationConfigCode[_index].params.slice();
                                            })
                                            TablePropertyApp.viewModel.operationConfigCode = TablePropertyApp.viewModel.operationConfigCode.slice();
                                            message.success('添加成功');
                                            this.props.store.formProperKeyValueRef.store.updateFormInputData(this.props.store.formProperKeyValueRef.uid,new PropertyKeyValueFormFields())
                                            this.modalRef.viewModel.visible = false;
                                        })
                                       
                                    }
                                }
                            })
                        }
                        else {
                            this.modalRef.viewModel.visible = false;
                        }
                    }}
                    onReady={(value) => {
                        this.modalRef = value;
                        const width = 550;
                        this.modalRef.viewModel.width = width;
                    }}>
                    <React.Fragment>
                        {this.viewModel.modalContentType === OperationEnum.editOperationOnlickCode ? <CodeEditor
                            width="100%"
                            height="300px"
                            mode="typescript"
                            value={this.viewModel.codeValue}
                            onChange={(values: string) => {
                                this.viewModel.codeValue = values
                                this.props.store.formProperyOperattionRef.store.updateFormInputData(this.props.store.formProperyOperattionRef.uid,{ onClick: { value: values } })
                            }}
                        ></CodeEditor> : <LegionsProForm
                            <PropertyKeyValueFormFields>
                            InputDataModel={PropertyKeyValueFormFields}
                            mapPropsToFields={(props) => {
                                return new PropertyKeyValueFormFields(props) // 实际处理结果实体
                            }}
                            onFieldsChange={(props,formFields) => {
                                this.props.store.formProperKeyValueRef.store.updateFormInputData(this.props.store.formProperKeyValueRef.uid,formFields)
                            }}
                            onReady={(form,ref) => {
                                this.props.store.formProperKeyValueRef = ref;
                            }}
                            colCount={1}
                            controls={this.tableListPropertyConfig.createKeyVlaueConfig()}
                        ></LegionsProForm>}
                    </React.Fragment>
                </LegionsProModal>
            </div>
        )
    }
}